<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>小米商城-个人信息</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到小米商城!</div>
			<div class="fr">
				<c:if test="${empty user}">
					<div class="login_btn fl">
						<a href="login.jsp">登录</a> <span>|</span> <a href="register.jsp">注册</a>
					</div>
				</c:if>
				<c:if test="${not empty user}">
					<div class="login_info fl" style="display: block">
						欢迎您：<em>${user.uname}</em>
					</div>
				</c:if>
				<div class="user_link fl">
					<span>|</span> <a href="user_center_info.jsp">用户中心</a> <span>|</span>
					<a href="gouwuche.jsp">我的购物车</a> <span>|</span> <a
						href="user_center_order.jsp?page=1">我的订单</a>
				</div>
			</div>
		</div>
	</div>

	<div class="search_bar clearfix">
		<a href="index.jsp" class="logo fl"><img src="image/logo_top.png"
			style="width: 80px;"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>

	</div>

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="user_center_info.jsp">· 个人信息</a></li>
				<li><a href="user_center_order.jsp?page=1">· 全部订单</a></li>
				<li><a href="user_center_site.jsp" class="active">· 收货地址</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
			<h3 class="common_title2">收货地址</h3>
			<div class="site_con">
				<dl>
					<dt>当前地址：</dt>
					<dd id="nowaddr"></dd>
				</dl>
				<dl id="allinfo">

				</dl>
			</div>
			<h3 class="common_title2">编辑地址</h3>
			<div class="site_con">
				<form>
					<div class="form_group">
						<label>收件人：</label> <input id="uname" type="text" name="">
					</div class="form_group">
					<div style='margin-left: 40px;'>
						<label style='font-size: 14px;'>省：</label> 
						<select id="prov" onchange="getCity()">
							<option value="-1">请选择所在的省份</option>
						</select> 
						<label style='font-size: 14px;'>市：</label> 
						<select id="city" onchange="getArea()">
							<option value='-1'>请选择所在的城市</option>
						</select> 
						<label style='font-size: 14px;'>区域：</label> 
						<select id="area">
							<option value='-1'>请选择所在区域</option>
						</select>
					</div>
					<div class="form_group form_group2">
						<label style=''>详细地址：</label>
						<textarea id="addr" class="site_area"></textarea>
					</div>
					<div class="form_group">
						<label>邮编：</label> <input type="text" name="">
					</div>
					<div class="form_group">
						<label>手机：</label> <input id="tel" type="tel" name="">
					</div>

					<input type="button" onclick="addAddress()" name="" value="提交"
						class="info_submit">
				</form>
			</div>
		</div>
	</div>
</select>
	<footer class="mt20 center">
		<div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select
			Region</div>
		<div>?mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号
			京网文[2014]0059-0009号</div>
		<div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
	</footer>

	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script>
	$(function(){
		$.post("addrServlet",{
			op:"getProv"
		},function(data){
			if(data.length>0){
				for(var i=0;i<data.length;i++){
					$("#prov").append('<option value="'+data[i].code+'">'+data[i].name+'</option>');
				}
			}
		},"json");
	});
	
	function getCity() {
		var pcode = $("#prov").val();
		$.post("addrServlet",{
			op : "getCity",
			pcode : pcode
		},function(data){
			if(data.length>0){
				$("#city").empty();
				for(var i=0;i<data.length;i++){
					$("#city").append('<option value="'+data[i].code+'">'+data[i].name+'</option>');
				}
				var Ccode = data[0].code;
				$.post("addrServlet",{
					op : "getArea",
					Ccode : Ccode
				},function(data){
					if(data.length>0){
						$("#area").empty();
						for(var i=0;i<data.length;i++){
							$("#area").append('<option value="'+data[i].code+'">'+data[i].name+'</option>');
						}
					}
				},"json");
			}
		},"json");
	}
	
	function getArea() {
		var Ccode = $("#city").val();
		$.post("addrServlet",{
			op : "getArea",
			Ccode : Ccode
		},function(data){
			if(data.length>0){
				$("#area").empty();
				for(var i=0;i<data.length;i++){
					$("#area").append('<option value="'+data[i].code+'">'+data[i].name+'</option>');
				}
			}
		},"json");
	}
	
	if( $(".login_btn").html() ){
		//提示用户先登录
		alert("请先登录");
		location.href="login.jsp";
	}
	
	$.post("addrServlet",{
		op:'getAllAddr'
	},function(data){
		//先判断
		if( data.length<=0 ){
			//没有值
			$("#nowaddr").html("请添加收货地址");
		}else{
			//对数据表中的地址进行显示
			var str='<dt>其他地址：</dt>';
			for( var i=0;i<data.length;i++ ){
				if( data[i].status == 1 ){
					//默认地址
					$("#nowaddr").html( data[i].province+" "+data[i].city+" "+data[i].area+" "+data[i].addr +
							 " ("+data[i].name+" 收)" + data[i].tel );
				}else{
					str+='<dd>'+data[i].province+' '+data[i].city+' '+data[i].area+' '+data[i].addr +
						 ' ('+data[i].name+' 收)' + data[i].tel+'<input onclick="setDefault('+data[i].aid+')" type="button" value="设为默认地址" style="margin-left:20px;"/></dd>';
				}
			}
			$("#allinfo").html( str );
		}
	},"json");
	
	//设置默认地址
	function setDefault(aid){
		$.post("addrServlet",{
			op:'setDefault',
			aid:aid
		},function(data){
			if( data>0 ){
				location.reload();
			}else{
				alert("设置失败");
			}
		},"json");
	}
	
	//添加地址
	function addAddress(){
		var uname=$("#uname").val();
		var prov=$("#prov").val();
		var city=$("#city").val();
		var area=$("#area").val();
		var addr=$("#addr").val();
		var tel=$("#tel").val();
		
		$.post("addrServlet",{
			op:'addAddress',
			uname:uname,
			prov:prov,
			city:city,
			area:area,
			addr:addr,
			tel:tel
		},function(data){
			if( data>0 ){
				alert("添加成功");
				location.reload();
			}else{
				alert("添加失败");
			}
		},"text");
	}
	
	</script>
</body>
</html>